<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  : 搭配 IkPageMain使用的详情组件
 * @updateInfo   :
 * @Date         : 2023-08-21 14:19:02
 * @LastEditTime : 2023-12-13 10:24:40
-->
<script lang="ts" setup name="IkDetail">
const props = defineProps({
  // 是否显示
  visible: { type: Boolean, default: false },
  // 展开位置
  placement: {
    type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
    default: 'top'
  },
  // 阴影
  shadow: {
    type: Boolean,
    default: true
  },
  // 动画时间
  timer: {
    type: Number,
    default: 0.45
  },
  // IkPageHeader prop参数
  headerProps: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
  // 存在滚动条时，每次进入默认滚动至顶部
  autoTop: {
    type: Boolean,
    default: true
  },
  titleClass: {
    type: String,
    default: ''
  }
})

defineEmits(['back'])

const trans = computed(() => {
  return `transform ${props.timer}s ease-in-out`
})

const domRef: Ref<HTMLElement | null> = ref(null)

// 进入详情时，默认返回顶部
watch(() => props.visible, val => {
  if (val && domRef.value && props.autoTop)
    domRef.value!.scrollTop = 0
})
</script>

<template>
  <div
    :class="`ik-detail-panel overflow-overlay place-ment-${
      visible ? placement : `-${placement}`
    } ${shadow ? 'shadow' : null}`"
  >
    <slot v-if="$slots.header" name="header"></slot>
    <IkPageHeader
      v-else
      v-bind="headerProps"
      border
      padding="0"
      :title-class="titleClass"
      @back="$emit('back')"
    />
    <div ref="domRef" class="detail-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ik-detail-panel {
  position: absolute;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  background: var(--ik-card-bg);
  z-index: 2;
  transition: v-bind('trans');
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .detail-content {
    padding: 20px 0;
    flex: 1;
    overflow-y: auto;
  }

  &.shadow {
    box-shadow: var(--el-box-shadow);
  }

  &.place-ment--top {
    transform: translateY(110%);
  }

  &.place-ment--bottom {
    transform: translateY(-110%);
  }

  &.place-ment--left {
    transform: translateX(-110%);
  }

  &.place-ment--right {
    transform: translateX(110%);
  }

  &.place-ment-top,
  &.place-ment-bottom {
    transform: translateY(0);
    z-index: 999;
  }

  &.place-ment-left,
  &.place-ment-right {
    transform: translateX(0);
    z-index: 999;
  }
}
</style>
